<template>
    <div class="addList">
      <el-steps :active="active" align-center>
        <el-step title="商品基本信息" description="这是一段很长很长很长的描述性文字"></el-step>
        <el-step title="添加库存信息" description="这是一段很长很长很长的描述性文字"></el-step>
        <el-step title="添加移动端详情" description="这是一段很长很长很长的描述性文字"></el-step>
      </el-steps>
      <div class="content">
        <el-form :model="form" ref="form" label-width="80px" :inline="false" size="mini">
          <div v-if="active == 1">
          
            <h3>基本信息</h3>
            <el-divider></el-divider>
            <el-row :gutter="20">
              <el-col :span="8" :offset="0">
                <el-form-item label="商品名称">
                  <el-input v-model="form.product.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="商品编码">
                  <el-input v-model="form.product.productSn"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="商品分类">
                  <el-select v-model="form.product.productCategoryId" @change="getProductCategoryName" value-key="" placeholder="" clearable filterable>
                    <el-option v-for="item in categoryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8" :offset="0">
                <el-form-item label="商品品牌">
                  <el-select v-model="form.product.brandId"  placeholder="" clearable filterable 
                  @change="getBrandName">
                    <el-option v-for="item in brandList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
          </div>
          <div  v-if="active == 2">
            <h3>商品sku信息</h3>
            <el-divider></el-divider>
            <el-form-item label="画册图片">
              <el-upload
              :headers="headers"
              class="avatar-uploader"
              action="/lejuAdmin/material/uploadFileOss"
                :file-list="fileList"
                :on-success="uploadImg"
                list-type="picture-card"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file"  slot-scope="{file}">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="sku设置">
              <el-row v-if="colorList.length != 0">
                <el-col :span="24" :offset="0">
                 颜色： <el-checkbox v-for="item in colorList" v-model="item.isSelected">{{item.text}}</el-checkbox>
                </el-col>
              </el-row>
              <el-row v-if="sizeList.length != 0">
                <el-col :span="24" :offset="0">
                  大小：<el-checkbox v-for="item in sizeList" v-model="item.isSelected">{{item.text}}</el-checkbox>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16" :offset="0">
                 
                    <el-row :gutter="10">
                      <el-col :span="6" :offset="0">
                        <el-input v-model.trim="color" placeholder="颜色描述:比如土豪金" size="mini" clearable @change=""></el-input>
                      </el-col>
                      <el-col :span="4" :offset="0"><el-button type="primary" size="mini" @click="addColor">创建颜色选项</el-button></el-col>
                      <el-col :span="6" :offset="0"><el-input v-model="size" placeholder="大小" size="mini" clearable @change=""></el-input></el-col>
                      <el-col :span="4" :offset="0">
                        <el-button type="primary" size="mini" @click="addSize">创建大小选项</el-button>
                      </el-col>
                    </el-row>
                  
                </el-col>
                <el-col :span="6" :offset="0">
                
                  <el-button type="primary" size="mini" @click="addSku">生成sku列表</el-button>
                  <el-button type="primary" size="mini" @click="">新增sku</el-button>
                  
                </el-col>
                <el-row v-if="form.pmsSkuStockList.length>0">
                  <el-col :span="24" :offset="0">
                    <el-table :data="form.pmsSkuStockList" border stripe>
                      <el-table-column 
                        prop="id"
                        label="图片"
                        >

                        <template v-slot="scope">
                          <!-- :on-success="handleAvatarSuccess(scope.$index)" -->
                          <el-upload
                            :show-file-list="false"
                            :headers="headers"
                            class="avatar-uploader"
                            action="/lejuAdmin/material/uploadFileOss"
                            :on-success="el=>handleAvatarSuccess(el,scope.$index)"
                           
                          >
                            <img style="width:100px;height:100px;" v-if="scope.row.pic" :src="scope.row.pic" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                        </template>
                      </el-table-column>
                      <el-table-column 
                        prop="id"
                        label="颜色"
                        >
                        <template v-slot="scope">
                          <el-input v-model="scope.row.spData[0].value" placeholder="" size="normal" clearable @change=""></el-input>
                          
                        </template>
                      </el-table-column>
                      <el-table-column 
                        prop="id"
                        label="大小"
                        >
                        <template v-slot="scope">
                          <el-input v-model="scope.row.spData[1].value" placeholder="" size="normal" clearable @change=""></el-input>
                          
                        </template>
                      </el-table-column>
                      <el-table-column 
                        prop="id"
                        label="库存"
                        >
                        <template v-slot="scope">
                          <el-input v-model="scope.row.stock" placeholder="" size="normal" clearable @change=""></el-input>
                          
                        </template>
                      </el-table-column>
                      <el-table-column 
                        prop="id"
                        label="预警库存"
                        >
                        <template v-slot="scope">
                          <el-input v-model="scope.row.lowStock" placeholder="" size="normal" clearable @change=""></el-input>
                          
                        </template>
                      </el-table-column>
                      <el-table-column 
                        prop="id"
                        label="锁定库存"
                        >
                        <template v-slot="scope">
                          <el-input v-model="scope.row.lockStock" placeholder="" size="normal" clearable @change=""></el-input>
                          
                        </template>
                      </el-table-column>
                      <el-table-column 
                        prop="id"
                        label="sku编码"
                        >
                        <template v-slot="scope">
                          <el-input v-model="scope.row.skuCode" placeholder="" size="normal" clearable @change=""></el-input>
                          
                        </template>
                      </el-table-column>
                      <el-table-column 
                        prop="id"
                        label="价格"
                        >
                        <template v-slot="scope">
                          <el-input v-model="scope.row.price" placeholder="" size="normal" clearable @change=""></el-input>
                          
                        </template>
                      </el-table-column>
                      <el-table-column 
                        prop="id"
                        label="销量"
                        >
                        <template v-slot="scope">
                          <el-input v-model="scope.row.sale" placeholder="" size="normal" clearable @change=""></el-input>
                          
                        </template>
                      </el-table-column>
                    </el-table>
                    
                  </el-col>
                 
                </el-row>
                
              </el-row>
              
            </el-form-item>
          </div>
          <div  v-if="active == 3">
            <h3>详情描述</h3>
            <el-divider></el-divider>
          </div>
          <!-- <el-form-item label="">
            <el-input v-model="form."></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item> -->
        </el-form>
        
       
      </div>
      <div>
        <el-button type="primary" v-if="active != 3" size="mini" @click="next">{{active == 1 ? '下一步，填写库存信息' : '下一步，填写移动端详情'}}</el-button>
        <el-button type="primary" v-if="active != 1" size="mini" @click="prev">返回上一步</el-button>
        
        <el-button type="primary" v-if="active == 3" size="mini" @click="save">提交保存</el-button>
      </div>
    </div>
</template>

<script>
import {
  getAllCategory
} from "@/api/goodsManage/category"
import {
  findAllBrand
} from "@/api/goodsManage/list"
import {
  getToken
} from "@/utils/myAuth"
import {
  addProductAndSkus,
  productSkusDetail,
  updateProductAndSkus
} from "@/api/goodsManage/list/add"
export default {
    data() {
        return {
          fileList:[],
          active:2,
          form:{
            "pmsSkuStockList": [
              // {
              //   "createTime": "",
              //   "id": "",
              //   "lockStock": "",
              //   "lowStock": "",
              //   "modifyTime": "",
              //   "pic": "",
              //   "price": "",
              //   "productId": "",
              //   "promotionPrice": "",
              //   "sale": "",
              //   "skuCode": "",
              //   "spData": "",
              //   "stock": ""
              // }
            ],
            "product": {
              "albumPics": "",
              "brandId": "",
              "brandName": "",
              "createTime": "",
              "deleteStatus": "",
              "description": "【尽享热爱正当时】指定iPhone14到手低至5399元！！",
              "detailDesc": "",
              "detailHtml": "",
              "detailMobileHtml": `<ul>
	            	 	        	            <li>
	                <a href="https://pro.m.jd.com/mall/active/3fNa4gg4udob1juiWbWWBp9z9PBs/index.html?babelChannel=ttt26" target="_self">
	                    <div class="ssd-shop-activity-item">
	                        <img src="//img30.360buyimg.com/sku/jfs/t1/136439/22/35549/21720/64619b5bFa4da8f62/22daa360b70411a3.jpg.avif" alt="">
	                    </div>
	                </a>
	            </li>
	        	    	</ul>`,
              "detailTitle": "Apple iPhone 14",
              "feightTemplateId": "",
              "giftGrowth": "",
              "giftPoint": "",
              "id": "",
              "keywords": "iphone,iPhone 14,Apple",
              "lowStock": "",
              "modifyTime": "",
              "name": "",
              "newStatus": 1,
              "note": "备注:6187折促销",
              "originalPrice": 1000,
              "pic": "https://img13.360buyimg.com/n1/s450x450_jfs/t1/53706/37/23588/62637/6409af54F0d3690ef/50e0a7744cdcd5b0.jpg.avif",
              "previewStatus": 1,
              "price": 1000,
              "productAttributeCategoryId": "",
              "productCategoryId": "",
              "productCategoryName": "",
              "productSn": "",
              "promotionEndTime": "",
              "promotionPerLimit": "",
              "promotionPrice": "",
              "promotionStartTime": "",
              "promotionType": "",
              "publishStatus": 1,
              "recommendStatus": 1,
              "sale": "",
              "serviceIds": "1,2,3",
              "sort": 999999,
              "stock": "",
              "subTitle": "AppleiPhone 14",
              "unit": "",
              "usePointLimit": "",
              "verifyStatus": 1,
              "weight": 100
            }
          },
          categoryList:[],
          brandList:[],
          color:"",
          colorList:[
            {
              text:"土豪金",
              isSelected:false
            },
            {
              text:"粉色",
              isSelected:false
            },
          ],
          size:"",
          sizeList:[
            {
              text:"128g",
              isSelected:false
            },
            {
              text:"256g",
              isSelected:false
            },
          ],
          headers:{
              token:getToken()
          }
        };
    },
    computed: {

    },
    created() {
      if(this.$route.query.id){
        productSkusDetail(this.$route.query.id)
        .then(res =>{
          
          res.data.skus.forEach(ele =>{
            ele.spData = JSON.parse(ele.spData)
          })
         var arr =  res.data.product.albumPics.split(",").map(ele =>{
            return {
              name:Math.random()+".jpg",
              url:ele
            }
          })
          this.fileList = arr
          console.log(arr)
          
          this.form.pmsSkuStockList = res.data.skus;
          this.form.product = res.data.product;
        })
      }
     
      getAllCategory()
      .then(res =>{
        console.log(res)
        this.categoryList = res.data.items.find(ele =>ele.category.name == "乐居").children
        // res.data.items[1].children
        // this.list = arr;
      })
      findAllBrand()
      .then(res =>{
        this.brandList = res.data.items;
      })
    },
    mounted() {

    },
    methods: {
      uploadImg(val){
        if(this.form.product.albumPics){
          this.form.product.albumPics +=","+val.data.fileUrl 
        }else{
          this.form.product.albumPics +=val.data.fileUrl 
        }
        
      },
      save(){
        var newData = JSON.parse(JSON.stringify(this.form));
        newData.pmsSkuStockList.forEach(ele =>{
          ele.spData = JSON.stringify(ele.spData)
        })
        if(this.$route.query.id){
          updateProductAndSkus(newData)
          return
        }
        addProductAndSkus(newData)
      },
      handleAvatarSuccess(val,index){
        console.log(val)
        this.form.pmsSkuStockList[index].pic = val.data.fileUrl
        // val.data.fileUrl
        // this.form.pmsSkuStockList[1].
      },
      // a(val,index){
      //   console.log(val,index)
        
      // },
      addSku(){
        // this.colorList   this.sizeList
        var sizeList = this.sizeList.filter(ele =>ele.isSelected)
        var colorList = this.colorList.filter(ele =>ele.isSelected)
        // console.log("sizeList",sizeList)
        // console.log("colorList",colorList);
        var arr = []
        sizeList.forEach(ele =>{ // 64g ,128g
          colorList.forEach(el =>{ // 红色,绿色 
            // ele  el
            var obj = {
                'id': '', // 新增不需要,编辑需要
                'lockStock': "", // 锁定库存 预留
                'lowStock': "", // 低库存预警  预留
                'pic': '', // sku封面图片
                'price': "", // 价格
                'productId': '', // 商品id,新增不需要,后台会自动关联
                'promotionPrice': "", //  促销价格  预留
                'sale': "", // 销量 预留
                'skuCode': '', // sku编码
                'spData':  [{"key":"颜色","value":el.text},{"key":"大小","value":ele.text}], //   [{"key":"颜色","value":"土豪金"},{"key":"大小","value":"128g"}]
                'stock': "", // 库存
                'modifyTime': '', // 更新时间 后台维护
                'createTime': '' // 后台自动生成
              }
              this.form.pmsSkuStockList.push(obj)
          })
        })
        // sizeList [ 64g ,128g]   colorList [红色,绿色]


      },
      addColor(){
        if(this.colorList.find(ele =>ele.text == this.color) ){
          return
        }
        if(this.color.length == 0){
          return
        }
        this.colorList.push({
          text:this.color,
          isSelected:false
        })
        this.color = ""
      },
      addSize(){
        if(this.sizeList.find(ele =>ele.text == this.size) ){
          return
        }
        if(this.size.length == 0){
          return
        }
        this.sizeList.push({
          text:this.size,
          isSelected:false
        })
        this.size = ""
      },
      getBrandName(val){
        console.log(val)
        this.form.product.brandName= this.brandList.find(ele =>ele.id == val).name;
      },
      getProductCategoryName(val){
        console.log(val)
        this.form.product.productCategoryName= this.categoryList.find(ele =>ele.id == val).name;
      },
      next(){
        this.active ++
      },
      prev(){
        this.active --
      }
    },
};
</script>

<style scoped lang="scss">
  .addList{
    .content{
      padding: 30px;
      background: #fff;
    }
  }
</style>
